<template>
	<div class="gj-container">
		<div class="phonelistWrap">
			<div class="phonelist-content">
				<div class="home-header-container clearfix">
					<span style="float:left;font-size:22px;">工单查询</span>
					<ul class="thirdRoute-btnsWrap clearfix" style="float: left;">
						<li>
							<span @click="changeTablePage('未开始')" :class="nowActiveIndex == 0?'active':'unActive'">未开始</span>
							<span class="line" v-if="nowActiveIndex == 0"></span>
						</li>
						<li>
							<span @click="changeTablePage('进行中')" :class="nowActiveIndex == 1?'active':'unActive'">进行中</span>
							<span class="line" v-if="nowActiveIndex == 1"></span>
						</li>
						<li>
							<span @click="changeTablePage('已完工')" :class="nowActiveIndex == 2?'active':'unActive'">已完工</span>
							<span class="line" v-if="nowActiveIndex == 2"></span>
						</li>
					</ul>
					<div class="searchBox" style="float:right;margin-right:30px;">
						<el-input placeholder="请输入搜索内容" style="width:400px;" prefix-icon="el-icon-search" v-model="searchContent"></el-input>
					</div>
				</div>

				<div class="tableBox workOrder" style="height:calc(100% - 130px);background:#fff;padding-top:30px;">
					<template v-if="nowActiveIndex == 0">
						<el-table :data="tableData" :row-class-name="tableRowClassName" height="100%">
							<el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
							<el-table-column prop="time" label="产线" align="center"></el-table-column>
							<el-table-column prop="errorName" label="工单号" align="center" min-width="100"></el-table-column>
							<el-table-column prop="logName" label="产品编码" align="center"></el-table-column>
							<el-table-column prop="remarks" label="产品名称" align="center"></el-table-column>
							<el-table-column prop="plan" label="产出/计划" align="center"></el-table-column>
							<el-table-column prop="timePlan" label="计划时间(min)" align="center"></el-table-column>
						</el-table>
					</template>
					<template v-if="nowActiveIndex == 1">
						<el-table :data="tableData" :row-class-name="tableRowClassName" height="100%">
							<el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
							<el-table-column prop="time" label="产线" align="center"></el-table-column>
							<el-table-column prop="errorName" label="工单号" align="center" min-width="100"></el-table-column>
							<el-table-column prop="logName" label="产品编码" align="center"></el-table-column>
							<el-table-column prop="remarks" label="产品名称" align="center"></el-table-column>
							<el-table-column prop="plan" label="产出/计划" align="center"></el-table-column>
							<el-table-column prop="timePlan" label="计划时间(min)" align="center"></el-table-column>
						</el-table>
					</template>
					<template v-if="nowActiveIndex == 2">
						<el-table :data="tableData" :row-class-name="tableRowClassName" height="100%">
							<el-table-column type="index" label="序号" align="center" width="100"></el-table-column>
							<el-table-column prop="time" label="产线" align="center"></el-table-column>
							<el-table-column prop="errorName" label="工单号" align="center" min-width="100"></el-table-column>
							<el-table-column prop="logName" label="产品编码" align="center"></el-table-column>
							<el-table-column prop="remarks" label="产品名称" align="center"></el-table-column>
							<el-table-column prop="plan" label="产出/计划" align="center"></el-table-column>
							<el-table-column prop="timePlan" label="计划时间(min)" align="center"></el-table-column>
						</el-table>
					</template>
				</div>
			</div>
		</div>
	</div>
</template>

<script>
import { mapGetters } from 'vuex';
import moment from 'moment';
export default {
	components: {},
	data() {
		return {
			userLoading: true,
			nowActiveIndex: 0,
			searchContent:'',
			tableData: [
				{
					id: '1',
					time: '14-1内装机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '296417',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '2',
					time: '14-2内装机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '296417',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '3',
					time: '13加工机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '74533',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '4',
					time: '14-1内装机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '296417',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '5',
					time: '14-2内装机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '296417',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '6',
					time: '13加工机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '74533',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '7',
					time: '14-1内装机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '296417',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '8',
					time: '14-2内装机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '296417',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '9',
					time: '13加工机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '74533',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '10',
					time: '14-1内装机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '296417',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '11',
					time: '14-2内装机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '296417',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '12',
					time: '13加工机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '74533',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '13',
					time: '14-1内装机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '296417',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '14',
					time: '14-2内装机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '296417',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				},
				{
					id: '15',
					time: '13加工机',
					timelength: '40',
					errorName: 'WO202108200001',
					logName: '74533',
					remarks: 'LSSG35-8*24’21',
					plan:'500/1000',
					timePlan:'2021-08-20 08:32'
				}
				
			]
		};
	},
	computed: {
		...mapGetters(['componentTitle'])
	},
	mounted() {},
	methods: {
		changeTablePage(val) {
			if (val == '未开始') {
				this.nowActiveIndex = 0;
			} else if (val == '进行中') {
				this.nowActiveIndex = 1;
			} else if (val == '已完工') {
				this.nowActiveIndex = 2;
			} else {
				this.nowActiveIndex = 0;
			}
		},
		tableRowClassName({ row, rowIndex }) {
			if (rowIndex % 2 == 1) {
				return 'gray-row';
			}
			return '';
		}
	}
};
</script>
<style scoped>
.workOrder .el-table .gray-row {
	background: #f7f8f9;
}
.workOrder >>> .el-table{
	border-bottom: 2px solid #000000;
}
</style>
<style lang="scss" scoped>
.home-header-container {
	padding-top:30px;
	padding-left:30px;
	border-radius:20px 20px 0px 0;
	height:120px;
	.thirdRoute-btnsWrap {
		margin-left:180px;
		margin-top: -8px;
		li {
			float: left;
			height: 90px;
			line-height: 60px;
			font-size: 34px;
			float: left;
			margin-left: 60px;
			border-bottom: 4px solid transparent;
			border-radius:2px;
			.active{
				color:#3f7de2;
				font-weight:600;
			}
			.unActive{
				color:#303130;
			}
			.line{
				width:60px;
				height:8px;
				background:#3f7de2;
				display: block;
				border-radius:4px;
				margin:0 auto;
				margin-top:20px;
				text-align: center;
			}
		}
	}
}
.tableBox{
	border-radius:0 0 20px 20px;
	padding-bottom:30px;
}
</style>
